<!DOCTYPE html>
<html>
<head>
	<title>Train Scheduler</title>

	<meta name="viewport" content="width=device-width" initial-scale=1.0">

	<!-- Link to reset CSS to zero out browser defaults -->
	<link rel="stylesheet" type="text/css" href="../assets/css/train_schedule/reset.css">

	<!-- Link to custom CSS -->
	<link rel="stylesheet" type="text/css" href="../assets/css/train_schedule/style.css">

	<!-- Link to Bootstrap 4 Beta CSS CDN -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

	<!-- Link to Font Awesome CSS CDN for Glpyhicons -->
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

<body>

	<div class="wrapper">

		<!-- Header area -->
	    <div class="jumbotron jumbotron-fluid header">

	    	<div class="container">
	    		<h1 class="display-3">
	    			<i class="fa fa-train" aria-hidden="true"></i>
	    			<i class="fa fa-clock-o" aria-hidden="true"></i>
	    			<i class="fa fa-subway" aria-hidden="true"></i>
				</h1>
			    <h1 class="display-3"><strong>Train Scheduler</strong></h1>
			    <p class="lead">Getting you there on time</p>
			    <h2 class="currentTime"></h2>
			</div>

	    </div>

	    <!-- Main Content Area -->
	    <div class="container">
			<div class="card text-white bg-dark mb-3">
			  	<div class="card-header schedule-header">
				    Train Schedule
				</div>
				<div class="card-body">
					<table class="table table-striped table-dark table-responsive-sm table-responsive-md train-schedule-table">
					  	<thead class="train-schedule-head">
						    <tr>
						       	<th scope="col">Train #</th>
						       	<th scope="col">Line</th>
							    <th scope="col">Destination</th>
							    <th scope="col">Next Arrival</th>
							    <th scope="col">Time to Arrival</th>
							    <th scope="col">Frequency</th>
							    <th scope="col">Platform #</th>
						    </tr>
					   	</thead>
					  	   		<tbody id="train-schedule-body"></tbody>
					</table>
				    
				</div>
			</div>

			<!-- Form Field Area -->
			<div class="card text-white bg-dark mb-3">
			  	<div class="card-header form-header">
				    Add Train to Schedule
				</div>
				<div class="card-body">
					<form novalidate>
					  <div class="form-row">
					    <div class="form-group col-sm-6">
					      <label for="train-number">Train #</label>
					      <input type="number" class="form-control" id="train-number" min="1" max="999" placeholder="123" required/>
					      <div class="invalid-feedback">
					        Please provide a Train #.
					      </div>
					    </div>
					    <div class="form-group col-sm-6">
					      <label for="train-line">Line</label>
					      <input type="text" class="form-control" id="train-line" maxlength=20 placeholder="Express" required/>
					      <div class="invalid-feedback">
					        Please provide a Train Line.
					      </div>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="train-destination">Destination</label>
					    <input type="text" class="form-control" id="train-destination" maxlength=12 placeholder="City or Station Name" required/>
					    <div class="invalid-feedback">
					        Please provide a Destination.
					      </div>
					  </div>
					  <div class="form-row">
					    <div class="form-group col-sm-4">
					      <label for="train-departure">First Departure (24hr format)</label>
					      <input type="number" class="form-control" id="train-departure" placeholder="0800" required/>
					      <div class="invalid-feedback">
					        Please provide a Train's First Departure Time.
					      </div>
					    </div>
					    <div class="form-group col-sm-4">
					      <label for="train-frequency">Frequency (minutes)</label>
					      <input type="number" class="form-control" id="train-frequency" min="10" max="720" placeholder="30" required/>
					      <div class="invalid-feedback">
					        Please provide a Train Frequency.
					      </div>
					    </div>
					    <div class="form-group col-sm-4">
					      <label for="train-platform">Platform</label>
					      <input type="text" class="form-control" id="train-platform" maxlength=2 placeholder="2a" required/>
					      <div class="invalid-feedback">
					        Please provide a Platform.
					      </div>
					    </div>
					  </div>
					  <button type="submit" class="btn button-add">Add Train</button>
					</form>
					
				</div>

	    	
	    </div>


	</div>

	<!-- Link to momentjs CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
	<!-- Firebase Link -->
	<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
	<!-- Link to jQuery CDN -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<!-- Link to Bootstrap 4 JS CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

	<!-- Links to JS Files -->
	<script type="text/javascript" src="../assets/js/train_schedule/model.js"></script>
	<script type="text/javascript" src="../assets/js/train_schedule/view.js"></script>
	<script type="text/javascript" src="../assets/js/train_schedule/controller.js"></script>

</body>

</html>